<template>
  <div class="mvlist">
    <div class="mv">
      <div class="w1200">
        <div class="mv-type">
          <div class="area">
              <ul>
                  <h2>区域</h2>
                  <li class="type-main" :class="item==selectarea?'active':''" @click="selectType(item,'area')" v-for="(item,index) in area" :key="index">{{item}}</li>
              </ul>
          </div>
          <div class="sort">
               <ul>
                  <h2>类型</h2>
                  <li class="type-main" :class="item==selectsort?'active':''" @click="selectType(item,'sort')" v-for="(item,index) in type" :key="index">{{item}}</li>
              </ul>
          </div>
        </div>
        <div class="allmv">
            <h2>全部mv</h2>
            <div class="allmv-type">
                <div class="allmv-item" :class="item===ordertype?'tactive':''" @click="selectType(item,'allmv')" v-for="(item,index) in order" :key="index">
                    <span>{{item}}</span>
                </div>
            </div>
        </div>
        <div class="mvlist">
            <mvlist :newMvList="newMvList"></mvlist>
            <template v-if="isLoading">
                <loading></loading>
            </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Mvlist from '@/components/common/MvList.vue'
import Loading from '@/components/common/Loading.vue'
export default {
    components:{
        Mvlist,
        Loading
    },
  data() {
    return {
      area: ["全部", "内地", "港台", "欧美", "日本", "韩国"],
      type: ["全部", "官方版", "原生", "现场版", "网易出品"],
      order: ["上升最快", "最热", "最新"],
      selectarea:'全部',
      selectsort:'全部',
      ordertype:'上升最快',
      newMvList:[],
      isLoading:true,
      isLoadMv:true,
      mv_params:{
          area:'',
          type:'',
          order:'',
          limit:'30',
          offset:0
      },
      total:0
    };
  },
  created() {
      this.getMv(this.mv_params)
  },
  computed: {},
  methods: {
      async getMv(params){
      const res = await this.$api.getAllMv(params);
      if (res.code !== 200) {
                return this.$msg.error('数据请求失败')
            }
      this.total=res.count;
      this.newMvList=this.mv_params.offset>0?[...this.newMvList,...res.data]:res.data;
      this.isLoadMv=!res.hasMore;
      this.isLoading = res.hasMore;
    //   console.log(res)
      },
      selectType(item,type){
         if(type==='area'){
             this.selectarea=item;
             console.log(this.selectarea)
             this.mv_params.area=this.selectarea;
         }
         if(type==='sort'){
             this.selectsort=item;
             this.mv_params.type=this.selectsort;
         }
         else{
             this.ordertype=item;
             this.mv_params.order=this.ordertype;
         }
      },
      loadMv(){
          this.isLoadMv=true;
          this.mv_params.offset=this.newMvList.length;
          console.log('loadmv')
          
      }
  },
  watch:{
      mv_params:{
          deep:true,
		    handler(newVal){
                if(this.newMvList.length>60){
                    return
                }
			    this.getMv(newVal);
		}
      }
  }
};
</script>
<style lang="less" scoped>
.mv{
    width: 100%;
    min-height: 500px;
    .w1200{
        width: 1200px;
         min-height: 500px;
        margin: 0 auto;
        .active{
            color: #fff;
            background: #ff641e;
        }
        .mv-type{
            height: 120px;
            width: 100%;
            ul{
                display: flex;
                align-items: center;
                height: 40px;
                line-height: 40px;
                 h2{
                margin-right: 40px;
                width: 60px;
                font-size: 16px;
                padding: 0px 10px 0px;
            }
                li{
                    padding: 0px 10px 20px;
                    cursor: pointer;
                    height: 30px;
                    line-height: 30px;
                    border-radius: 5px;
                }
            }
        }
        .allmv{
            // margin-top: 20px;
            width: 100%;
            height: 60px;
            padding: 15px 0;
            display: flex;
            h2{
                padding-right: 20px;
                padding-bottom: 15px;
                height: 60px;
                line-height: 30px;
                font-size: 23px;
                width: 104px;
            }
            .allmv-type{
                flex: 1;
                display: flex;
                align-items: center;
                .allmv-item{
                    width: 29px;
                   height: 20px;
                    margin-right: 36px;
                    cursor: pointer;
                     span{
                        overflow: hidden;
                    }
                }
                .allmv-item:nth-child(1){
                    width: 66px;
                    font-size: 16px;
                }
                .tactive{
                    position: relative;
                    font-weight: 600;
                }
                .tactive::after{
                    display: block;
                    content: '';
                    position: absolute;
                    bottom: -1px;
                    left: -1px;
                    width: 100%;
                    height: 8px;
                    background-color: #ff641e;
                    z-index: -1;
                }
                
            }
        }
    }
}
</style>
